<template>
  <div>
    <el-card class="box-card">
      <el-form
        :inline="true"
        :model="dataForm"
        class="dadeFrom"
        @keyup.enter.native="searchData()"
      >
        <el-form-item label="门店类型:">
          <el-select
            v-model="dataForm.storeType"
            placeholder="请选择门店类型"
            clearable
            style="width: 200px"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in storeData"
              :key="index"
            ></el-option>
          </el-select>
          <!-- <el-input
            v-model="dataForm.storeType"
            placeholder="请输入"
            style="width: 200px"
            clearable
          ></el-input> -->
        </el-form-item>
        <el-form-item label="时间查询:">
          <div class="block">
            <el-date-picker
              v-model="valuetimes"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-button @click="searchData()" type="primary">查询</el-button>
        <el-button @click="handleReset()" type="primary">重置</el-button>
        <el-button type="success" @click="exportGet()">导出</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <!-- <el-button type="success" size="mini" @click="hanlleAdd()">创建群组</el-button> -->
      <!-- <el-button type="danger" size="mini" @click="handleDelete()">批量删除</el-button> -->
      <el-table
        :data="dataList"
        style="width: 100%; margin-top: 20px"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column type="index" label="序号" align="center" width="60">
        </el-table-column>
        <!-- <el-table-column prop="dayId" label="日期" align="center">
        </el-table-column> -->
        <el-table-column prop="latnId" label="分公司" align="center">
        </el-table-column>
        <el-table-column prop="mktAreaName" label="三级单元" align="center">
        </el-table-column>
        <el-table-column prop="storeName" label="门店名称" align="center">
        </el-table-column>
        <el-table-column prop="storeCode" label="门店编码" align="center">
        </el-table-column>
        <el-table-column prop="storeType" label="门店类型" align="center">
        </el-table-column>
        <el-table-column
          prop="accessCodeQuantity"
          label="接入码绑定数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="discernUserTakeQuantity"
          label="当日识别取件用户数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="targetUserTakeQuantity"
          label="全量目标用户查询次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="diffHighChanceQuantity"
          label="异网高概率查询次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="kdAideCallQuantity"
          label="快电助手一键外呼数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="diffAideCallQuantity"
          label="异网一键外呼数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="customerEnterQuantity"
          label="意向客户录入数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="wxFansQuantity"
          label="企业微信加粉数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="kdAideChangeQuantity"
          label="快电助手转化量"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
        >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @pageChange="pageChange"
      />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog title="群组配置" :visible.sync="dialogVisible" width="40%">
      <div>
        <div style="padding-left: 70px">
          群组名称：<el-input
            v-model="form.groupName"
            placeholder="群组名称"
            style="width: 200px"
          ></el-input>
        </div>
        <div style="margin-top: 20px">
          群组编号(iwork群组)：
          <el-input
            v-model="form.groupNum"
            placeholder="群组编号"
            style="width: 200px"
          ></el-input>
        </div>
        <div style="padding-left: 96px">
          备注：<el-input
            v-model="form.remark"
            type="textarea"
            :rows="2"
            placeholder="备注"
            style="width: 400px; margin-top: 20px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading: true,
      dataList: [],
      storeData: [], //门店类型数据
      pageNum: 1,
      pageSize: 10,
      total: 0,
      id: null,
      latnIdList: [],
      dialogVisible: false,
      ids: [],
      dataForm: {
        storeType: "",
        groupNum: "",
      },
      valuetimes: "", //时间段
      startTime: "", //开始时间
      endTime: "", //结束时间
      code: "",
      form: {
        groupName: "",
        groupNum: "",
        remark: "",
      },
    };
  },
  created() {
    // this.fetchTableList();
    this.storeList();
  },
  activated: function () {
    this.fetchTableList();
  },
  methods: {
    handleReset() {
      this.dataForm.storeType = "";
      this.valuetimes = "";
    },
    handleSubmit() {
      if (this.id) {
        this.fetchUpdateGroup();
      } else {
        this.fetchAddGroup();
      }
    },
    fetchAddGroup() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/saveIworkGroupNum"),
        method: "post",
        data: this.$http.adornData({
          dictName: this.form.groupName,
          // dictValue: this.form.groupNum,
          dictType: "dyxqz",
          remark: this.form.remark,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    fetchUpdateGroup() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.id,
          dictName: this.form.groupName,
          // dictValue: this.form.groupNum,
          dictType: "dyxqz",
          remark: this.form.remark,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    hanlleAdd() {
      this.id = null;
      this.form.groupName = "";
      // this.form.groupNum = "";
      this.form.remark = "";
      this.dialogVisible = true;
    },
    // 多选
    // handleSelectionChange(val) {
    //   this.ids = [];
    //   val.map((item) => {
    //     this.ids.push(item.id);
    //   });
    // },

    // 获取表格数据
    fetchTableList() {
      //当月第一天
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      const startTime = date.getFullYear() + "-" + month + "-" + day;
      console.log(startTime);
      //当月当前天
      var myDate = new Date();
      const Y = myDate.getFullYear() + "";
      const M =
        (myDate.getMonth() + 1 < 10
          ? "0" + (myDate.getMonth() + 1)
          : myDate.getMonth() + 1) + "";
      const C =
        (myDate.getDate() - 1 < 10
          ? "0" + myDate.getDate()
          : myDate.getDate()) + "";
      // const D = C - 1;
      const endTime = Y + "-" + M + "-" + C;
      console.log(endTime);
      if (this.valuetimes == "") {
        console.log("sdfgdfhfg");
        this.startTime = startTime;
        this.endTime = endTime;
        // console.log(this.startTime);
        // console.log(this.endTime);
      }
      //   const {groupName, groupNum} = this.dataForm
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("report/getOpenList"),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          storeType: this.dataForm.storeType,
          sign: "OPEN",
          startTime: this.startTime,
          endTime: this.endTime,
          // dictValue: groupNum,
        }),
      }).then(({ data }) => {
        console.log(data, "data");
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.total = data.data.total;
            this.dataList = data.data.records;
          }, 1000);
        } else if (data.code === 500) {
          this.code = data.code;
          // console.log("sdgdsgfdf");
          // this.$message.error(data.msg);
          // return
        }
      });
    },
    //格式化时间
    transformTimestamp(result) {
      const date = new Date(result);
      const Y = date.getFullYear() + "";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
      // const h = date.getHours() + ":";
      // const m = date.getMinutes();
      // const s = date.getSeconds(); // 秒
      const dateString = Y + "-" + M + "-" + D;
      console.log("dateString", dateString); // > dateString 20200110
      return dateString;
    },
    // 点击搜索
    searchData() {
      if (!this.valuetimes == "") {
        // this.startTimeString = "";
        // this.endTimeString = "";
        var time1 = new Date(this.valuetimes[0]).getTime();
        var time2 = new Date(this.valuetimes[1]).getTime();
        const start = this.transformTimestamp(time1);
        const end = this.transformTimestamp(time2);
        this.startTime = start;
        this.endTime = end;
        console.log(this.startTime);
        console.log(this.endTime);
        this.fetchTableList();
      } else {
        this.startTime = "";
        this.endTime = "";
        // this.startTimeString = "";
        // this.endTimeString = "";
        this.fetchTableList();
      }
    },
    //门店类型数据
    storeList() {
      this.$http({
        url: this.$http.adornUrl("report/getStore"),
        method: "get",
        params: this.$http.adornParams({
          sign: "OPEN",
        }),
      }).then((res) => {
        console.log(res, "res");
        if (res && res.data.code === 0) {
          this.storeData = res.data.data;
        }
        console.log(this.storeData);
      });
    },
    //数据导出
    exportGet() {
      this.$http({
        url: this.$http.adornUrl("report/openExport"),
        method: "get",
        params: this.$http.adornParams({
          storeType: this.dataForm.storeType,
          startTime: this.startTime,
          endTime: this.endTime,
          sign: "OPEN",
        }),
        responseType: "blob",
      }).then((res) => {
        console.log(res, "ddddddd");
        // return
        if (res.status == 200) {
          if (this.code === 500) {
            this.fetchTableList();
            return;
          } else {
            let blob = res.data;
            const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => {
              // 处理load事件。该事件在读取操作完成时触发
              // 新建个下载的a标签，完成后移除。
              let a = document.createElement("a");
              let _fileName = "开门7事件管控.xls";
              a.download = _fileName;
              a.href = event.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            };
          }
        }
      });
    },
    //编辑
    handleEdit(id) {
      this.id = id;
      this.$http({
        url: this.$http.adornUrl(`sysdictdata/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dialogVisible = true;
          this.form.groupName = data.sysDictData.dictName;
          // this.form.groupNum = data.sysDictData.dictValue;
          this.form.remark = data.sysDictData.remark;
        }
      });
    },
    // 删除
    handleDelete(id) {
      let ids = [];
      if (id) {
        ids = [id];
      } else {
        ids = this.ids;
        if (ids.length == 0) {
          this.$message.error("请先选择要删除的选项");
          return false;
        }
      }
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("sysdictdata/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 再次提醒
    // 分页
    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>
<style scoped>
</style>
